<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人博客-即时兴起的实践</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./icon/iconfont.css" />
  </head>

  <body>
    <div class="resume-head">
      <div class="head-block">
        <div class="head">
          <div class="nav-box">
            <div class="avatar">
              <img src="./images/avatar.jpg" alt="作者头像" title="帅吗？" />
            </div>
            <ul class="navList">
              <li id="nav1">
                <a href="#" class="actived"><span>首页</span></a>
              </li>
              <li id="nav2">
                <a href="javascript:;"><span>项目</span></a>
              </li>
              <li>
                <a href="https://gitee.com/jiangshuxian" target="_blank"
                  ><span>Gitee</span></a
                >
              </li>
              <li id="nav4">
                <a href="javascript:;"><span>其他</span></a>
              </li>
            </ul>

            <a href="./pdf/jsx.pdf" class="download" target="_blank">
              <i class="iconfont icon-pdf"></i>
              <span>下载个人简历</span>
            </a>

            <div class="phone-nav-box">
              <i class="iconfont icon-mianbaodaohangshouqi"></i>
            </div>
          </div>
        </div>
        <div class="info">
          <div class="info-l">
            <p class="p1">你好</p>
            <p class="p2">我是蒋书衔</p>
            <div class="line"></div>
            <p class="p3">AN EXPLORER YEARNING FOR FREEDOM</p>
            <ul class="SocialMedia">
              <li>
                <a href=""><i class="iconfont icon-weixin"></i></a>
              </li>
              <li>
                <a href=""><i class="iconfont icon-QQ"></i></a>
              </li>
              <li>
                <a href=""><i class="iconfont icon-youxiang1"></i></a>
              </li>
            </ul>
          </div>
          <div class="info-r">
            <div class="audioPlay" style="position: relative">
              <img
                src="./images/changpian.png"
                alt=""
                class="changpian playButton"
              />
              <img
                src="./images/changgan3.png"
                alt=""
                class="changgan playButton"
              />
              <span
                style="
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translateX(-50%);
                  color: #23074d;
                  background-color: rgba(255, 255, 255, 0.5);
                  border: 0.07142857vw solid #fff;
                  padding: 5px 10px;
                "
                id="tip"
                >点击音乐盘符试试呗</span
              >
            </div>
            <div class="audioControl">
              <audio
                src="./audio/nian.mp3"
                class="audio"
                controls
                loop
                autoplay
              ></audio>
              <div class="lrc-box">
                <ul></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="resume-main">
        <div class="opus-block">
          <div class="title-box">
            <h1 class="title">系统性的作品集</h1>
            <p class="tip">光在云层里，你要穿过那缭绕的云雾，让光散发。</p>
          </div>
          <div class="cards">
            <div class="card-box">
              <div class="card-l">
                <img src="./images/opus/item2.webp" alt="" />
              </div>
              <div class="card-r">
                <p class="name">CLI+Vue+VueRouter+Axios+ElementUI+MySQL+C#</p>
                <h2 class="title">基于Web3D的恐龙博物馆——侏罗世纪</h2>
                <p class="info">
                  基于3D技术的前后端分离的Web应用程序，项目针对于重庆自然博物馆（西部最
                  大的恐龙博物馆、国家一级博物馆），以3D展示的形式，对恐龙模型进行展示，并包含
                  门票预约、文物申报、世纪档案等功能。
                </p>
                <div class="button">作品详情</div>
              </div>
            </div>
            <div class="card-box">
              <div class="card-l">
                <img src="./images/opus/item1.webp" alt="" />
              </div>
              <div class="card-r">
                <p class="name">CLI+Vue全家桶+Axios+ElementUI+MySQL+C#</p>
                <h2 class="title">及时速评——项目评审系统</h2>
                <p class="info">
                  为解决线下评审打分不便捷、excel打分的不专业性等问题，为评委提供高效并简
                  洁的在线评审网站，包含项目审核、项目组队、评委分配、评委打分、查询比赛结果等功
                  能。
                </p>
                <div class="button">作品详情</div>
              </div>
            </div>
          </div>
        </div>
        <div class="practices-block">
          <div class="title-box">
            <h1 class="title">休闲时光</h1>
            <p class="tip">我饱受万物的影响，但却无物能改变我。</p>
          </div>
          <div class="content">
            <a class="item">
              <img src="./images/practices/practice-1.png" alt="" />
            </a>
            <div class="item">
              <img src="./images/practices/practice-2.png" alt="" />
            </div>
            <div class="item">
              <img src="./images/practices/practice-3.png" alt="" />
            </div>
            <a
              href="https://js.design/f/U56dhR?p=zE9dRO4ZsG&mode=design"
              target="_blank"
              class="item"
            >
              <img src="./images/practices/practice-4.png" alt="" />
            </a>
          </div>
        </div>
        <div class="about-block">
          <div class="title-box">
            <div class="title">关于我</div>
            <div class="tip">2024年5月获得软件著作权-第二课堂评审系统</div>
            <div class="tip">
              2024年5月获得软件著作权-侏罗世纪 2024年1月发表期刊网论文一篇
            </div>
            <div class="tip">
              2024年7月获得第十七届中国计算机设计大赛全国三等奖
            </div>
            <div class="tip">
              2024年5月获得第十七届中国计算机设计大赛重庆市一等奖
            </div>
            <div class="tip">
              2024年4月获得第十四届蓝桥杯大学生个人赛Web开发组重庆市二等奖
            </div>
            <div class="tip">
              2024年9月获得大学生广告艺术大赛UI类三等奖-她力量
            </div>
            <div class="tip">
              2024年9月获得大学生广告艺术大赛动画类优秀奖-即时设计
            </div>
            <div class="tip">
              2024年9月获得大学生广告艺术大赛UI类优秀奖-印记
            </div>
            <div class="tip">
              2023年10月获得第二课堂软件专业比赛一等奖-第二课堂评审系统
            </div>
            <div class="tip">
              2023年10月获得第二课堂软件专业比赛一等奖-侏罗世纪
            </div>
            <div class="tip">
              2023年2月获得第二课堂软件专业比赛优秀奖-重工科技馆
            </div>
            <div class="tip">
              2022年12月获得“青春献礼二十大 创新创业在创谷”微视频大赛三等奖
            </div>
            <div class="title">联系我</div>
            <div class="tip">
              <div class="call-me">
                <div class="item">
                  <a href="tencent://message/?uin=1186044249&Site=&Menu=yes"
                    ><i class="iconfont icon-QQ"></i
                  ></a>

                  <i class="iconfont icon-weixin"></i>
                  <i class="iconfont icon-youxiang1"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="filings">
            <i class="iconfont icon-beian"></i
            ><a href="https://beian.miit.gov.cn/" target="_blank"
              >渝ICP备2024018750号</a
            >
          </div>
        </div>
      </div>
    </div>

    <script src="./js/index.js"></script>
    <script src="./js/gsap.min.js"></script>
    <script src="./js/ScrollTrigger.min.js"></script>
    <script src="./js/animate.js"></script>
  </body>
</html>
